<template>
    <view v-if="info" class="page">      
        <!--  -->
         <!-- 评价数据列表 -->
        <view class="flex flex-column pj-item" @click="comment">
            <view class="flex align-center">
                <view class="pj-user-avator ">
                    <image :src="info.user.avatar"></image>
                </view>
                <view class="pj-user-name mar-l-10">
                    <text class="font-color-333 font-size-16 font-bold">匿名用户</text>
                </view>
            </view>
            <view class=" mar-t-5">
                <text class="font-color-A7AABB font-size-13">{{transformTime(info.create_time)}}</text>
            </view>
            <view class=" mar-t-5">
                <text class="tq-line-2 font-color-999 font-size-15">{{info.remark}}</text>
            </view>
        </view>
        <clearLine :height="15" bacColor="#F4F5FA"></clearLine>
        
        <view class="">
            <view class="top container border-b-f2 pad-t-10 pad-b-10">
                <text>全部评论</text>
            </view>
            <commentList :list="list" @reply="reply" :current_comment_index.sync="current_comment_index" ></commentList>
            
            
        </view>
        <view style="height:70px"></view>
        <view class="pos-fixed comment-footer flex">
            <input type="text" v-model="content" :placeholder="placeholder" class="flex-1">
            <button @click="confirm" class="bac-color-normal font-color-fff" style="height:45px;line-height:45px">提交</button>
        </view> 
    </view>
</template>

<script>
import {evaluatesDetail,commentsList,commentsCreate,serverTimeStamp} from '@/utils/http'
import commentList from '@/components/comments-list'
export default {
    data() {
        return {
            id:'',
            info:'',
            placeholder:'留下你的精彩评论吧',
            index_page:0,
            total_page:1,
            list:[],
            content:'',
            pid:0,
            reply_id:'',//回复关联id
            type:'evaluate',
            current_comment_index:'',
            timestamp:'',
        }
    },
    components:{
        commentList
    },
    computed:{
        user_info(){
            return this.store.state.user_info;
        }
    },
    methods: {
        async evaluateDetail(){
            await  evaluatesDetail({id:this.id}).then(res=>{
                if(res){
                    this.info = res;
                }
            })
        },
        commentsList(){
            let timestamp = new Date().getTime();
        //     1628211844
        //    // console.log(1628211822984);
            commentsList({type:'evaluate',related_id:this.id,page:this.index_page +1,pid:0,timestamp:this.timestamp }).then(res=>{
                if(res){
                    this.index_page = res.current_page
					this.total_page = res.last_page
                    this.list = [...this.list,...res.data]
                }
            })
        },
      
        init(){
            this.pid = 0 
            this.current_comment_index = '';
            this.pid = 0;
            this.content = '';
            this.placeholder = '留下你的精彩评论吧'
        },
        comment(){
            this.init();
        },
        reply(cindex){
            let current_comments = this.list[this.current_comment_index];
            // this.current_comment_index = index;
            this.content = '';
            this.pid = current_comments.id //设置上级为一级评论的id
            if(typeof cindex != 'undefined'){
                let child_comment = current_comments.child.data[cindex];
                this.reply_id = child_comment.id
                this.placeholder = '回复:'+ child_comment.user.nickname
            }else{
                this.reply_id = current_comments.id 
                this.placeholder = '回复:'+current_comments.user.nickname;
            }
           
        },
        //评论 or 回复
        confirm(){
            if(this.content){
                if(this.pid > 0){
                    //回复
                    commentsCreate({id:this.reply_id,type:'comments',content:this.content,pid:this.pid}).then(res=>{
                        if(res){
                            let  child_comment = this.list[this.current_comment_index].child.data;
                            console.log(typeof child_comment);
                            if(  typeof child_comment == 'object' ){
                                this.list[this.current_comment_index].child.total ++;
                                this.list[this.current_comment_index].child.data.unshift(res);
                            }
                         
                            //this.list[this.current_comment_index].child.unshift(res);
                        }
                        this.init()
                    })
                }else{
                    //评论
                    commentsCreate({id:this.id,type:'evaluate',content:this.content}).then(res=>{
                        if(res){
                            res.child = {
                                current_page:1,
                                data:[],
                                last_page:0,
                                per_page:1,
                                total:1
                            };
                            //res.child.data = [];
                            this.list.unshift(res)
                        }
                        this.init()
                    })
                }
                
            }
           
          
        },
        serverTimeStamp(){
            serverTimeStamp().then(res=>{
                this.timestamp = res;
            })
        }
    },
    //下拉刷新
	onPullDownRefresh(){
		this.index_page = 0;
		this.total_page = 1;
		this.list = []
		this.commentsList();
	},
	//上拉加载
	onReachBottom(){
		if(this.index_page < this.total_page){
			this.commentsList();
		}
	},
    async onLoad(options){
        this.id = options.id
        await  this.evaluateDetail();
        this.commentsList();
    }
}
</script>

<style scoped>
.pj-item {
    padding: 14px;
    box-shadow: 2px 3px 10px 5px rgb(243, 240, 240);
    border-radius: 8px;
}
.pj-user-avator {
    /* background-color: #cccccc; */
    height:1.94em;
    width: 1.94em;
}
.pj-user-avator image{
    height:1.94em;
    width: 1.94em;
    border-radius: 100%;
}
.comment-footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    z-index: 999;
    border-top: 1px solid #eeee;
    background-color: #fff;
    max-height: 60px;
    height: 60px;
    line-height: 60px;
}
.comment-footer input{
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
}
.child-comments{
    background-color: #FAFAFA;
    /* padding-left: 10px; */
    margin-left: 35px;
    padding-bottom: 10px;
}
.child-comments .child-user-avatar{
    height: 20px;
    width: 20px;
    background-color: #ccc;
    border-radius: 100%;
}
.child-content{
    margin-left: 20px;
}
</style>